<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8">
	<title>完美拖拽</title>
	<style type="text/css">
		html,body{overflow:hidden;}
		body,div,h2,p{margin:0;padding:0;}
		body{color:#fff;background:#000;font:12px/2 Arial;}
		p{padding:0 10px;margin-top:10px;}
		span{color:#ff0;padding-left:5px;}
		#box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;}
		#box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;}
		#box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var posArr = [];
		var box = document.getElementById("box");
		box.children[0].addEventListener("mousedown", function(e){
			var mousex = e.offsetX;
			var mousey = e.offsetY;
			document.onmousemove = function(e){
				box.style.left = e.clientX - mousex + "px";
				box.style.top = e.clientY - mousey + "px";
				//记录位置
				posArr.push({x:box.offsetLeft,y:box.offsetTop});
			};
		});
		document.addEventListener("mouseup", function(){
			document.onmousemove = null;
		})
		box.children[0].children[0].onclick = function(){
			//沿路径返回
			box.timer = setInterval(function(){
				if(posArr.length == 0) {
					clearInterval(box.timer);
					return;
				}
				var pos = posArr.pop();
				box.style.left = pos.x + "px";
				box.style.top = pos.y + "px";
			},20);
		}
	};
	</script>
</head>
<body>
	<div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
		<h2><a href="javascript:void(0);">点击回放拖动轨迹</a></h2>
		<p><strong>Drag:</strong><span>false</span></p>
		<p><strong>offsetTop:</strong><span>231</span></p>
		<p><strong>offsetLeft:</strong><span>533</span></p>
	</div>
	
</body>
</html>